<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>PCRE2站内 搜索引擎</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            height: 100%;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 800px;
            margin: 20px auto;
        }
        .search {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }
        .search input {
            flex: 1;
            height: 50px;
            padding: 0 15px;
            border: 2px solid #4e6ef2;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        .search input:focus {
            border-color: #254eda;
        }
        .search button {
            width: 120px;
            height: 50px;
            background: #4e6ef2;
            border: none;
            border-radius: 4px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .search button:hover {
            background: #254eda;
        }
        .result {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
        }
        .item {
            margin-bottom: 25px;
            padding: 15px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .item a {
            display: block;
            font-size: 18px;
            color: #1a0dab;
            text-decoration: none;
            margin-bottom: 8px;
        }
        .item a:hover {
            text-decoration: underline;
        }
        .item p {
            color: #545454;
            line-height: 1.5;
            margin-bottom: 8px;
        }
        .item i {
            display: block;
            color: #006621;
            font-style: normal;
            font-size: 14px;
        }
        .no-result {
            text-align: center;
            color: #70757a;
            padding: 40px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search">
            <input type="text" placeholder="输入搜索关键词" id="searchInput">
            <button onclick="handleSearch()">搜索</button>
        </div>
        <div class="result" id="resultArea"></div>
    </div>

    <script>
        // 初始化绑定事件
        $(document).ready(() => {
            // 回车键支持
            $('#searchInput').on('keypress', (e) => {
                if (e.which === 13) handleSearch()
            })
            
            // 自动聚焦输入框
            $('#searchInput').focus()
        })

        async function handleSearch() {
            const query = $('#searchInput').val().trim()
            if (!query) return

            try {
                const response = await $.ajax({
                    url: '/s',
                    method: 'GET',
                    data: { word: query },
                    dataType: 'json',
                    timeout: 5000
                })

                renderResults(response, query)
            } catch (error) {
                showMessage(error.status === 200 ? 
                    `找不到 "${query}" 的相关结果` :  `搜索失败,请检查网络连接`)
            }
        }

        function renderResults(data, query) {
            const $result = $('#resultArea')
            $result.empty()

            if (!data || data.length === 0) {
                return showMessage(`找不到 "${query}" 的相关结果`)
            }

            data.forEach(item => {
                const html = `
                    <div class="item">
                        <a href="${item.url}" target="_blank">${item.title}</a>
                        <p>${item.abstract}</p>
                        <i>${item.url}</i>
                    </div>
                `
                $result.append(html)
            })
        }

        function showMessage(msg) {
            $('#resultArea').html(`<div class="no-result">${msg}</div>`)
        }
    </script>
</body>
</html>
